<template>
	<div class="leave">
		<div class="liveReservation_h clear">
			<router-link :to="{path: '/class/leave/index', query: {id: path}}">请假申请</router-link>
			<router-link v-if="path_url == false" :to="{path: '/class/leave/auth',query: {id: path}}">请假审批</router-link>
		</div>
		<!--  -->
		<div class="Invite_sl clear">
			<!--  -->
			<div class="myLive_ch fl">
				<label>
					<input type="radio" name="check" checked>
					<span @click="changeCount(-1)">全部（<i>{{all}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(1)">已通过（<i>{{normal}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(2)">未审批（<i>{{unapproved}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(3)">已拒绝（<i>{{refused}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(4)">已撤销（<i>{{revoke}}</i>）</span>
				</label>
			</div>
			<router-link :to="{path: '/class/leave/add',query: {id: path}}" class="make_link fr">新建申请</router-link>
		</div>
		<!--  -->
		<div class="myLive_" v-loading="loading">
			<ul class="clear">
				<li class="leave_ls fl" v-for="(item, index) in leaveList">
					<router-link class="leave_ls1" :to="{path: '/class/leave/detail', query: {id: item.id}}">{{item.name}}的请假申请</router-link>
					<div class="leave_ls2">请假类型：{{['事假', '病假', '婚假', '丧假', '其他'][+item.leave_style]}}</div>
			<!-- 		<div class="leave_ls2" v-if="item.leave_style == 0">请假类型：事假</div>
					<div class="leave_ls2" v-if="item.leave_style == 1">请假类型：病假</div>
					<div class="leave_ls2" v-if="item.leave_style == 2">请假类型：婚假</div>
					<div class="leave_ls2" v-if="item.leave_style == 3">请假类型：丧假</div>
					<div class="leave_ls2" v-if="item.leave_style == 4">请假类型：其他</div> -->
					<div class="leave_ls3">
						<p>
							起止时间：{{item.start_time.substring(0,16)}}
						</p>
						<p>
							截止时间：{{item.end_time.substring(0,16)}}
						</p>
					</div>
					<div class="leave_ls4 clear">
						<span>发起时间：{{item.create_time.substring(0,16)}}</span>
						<el-button type="primary" plain @click="getRevoke(item.id)" v-if="item.status == 2">撤销申请</el-button>
					</div>
					<div class="leave_ls5 approved" v-if="item.status == 1">
						<i class="ipm qingjia_icon01"></i>
						<p>已批准</p>
					</div>
					<div class="leave_ls5 unapproved" v-if="item.status == 2">
						<i class="ipm qingjia_icon04"></i>
						<p>未审批</p>
					</div>
					<div class="leave_ls5 refuse" v-if="item.status == 3">
						<i class="ipm qingjia_icon02"></i>
						<p>拒绝</p>
					</div>
					<div class="leave_ls5 rescinded" v-if="item.status == 4">
						<i class="ipm qingjia_icon02"></i>
						<p>已撤销</p>
					</div>
				</li>
			</ul>
		</div>
		<!--  -->
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<!-- 拒绝理由 -->
		<el-dialog title="拒绝理由" :visible.sync="refusalVisible" width="400px" custom-class="refusalVisible" :close-on-click-modal="false">
			<div class="refusalTxT">
				拒绝理由
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			refusalVisible: false,
			leaveList: [],
			page_size: this.$g.page_size,
			page_index: 1,
			total_number: 0,
			all: 0,
			normal: 0,
			unapproved: 0,
			refused: 0,
			revoke: 0,
			Qstate: -1,
			placeholder: false,
			loading: true,
			path: this.$route.query.id,
			path_url:this.roleBaseid(4,5),
			identityVal: sessionStorage.getItem('parent_child_id') ? sessionStorage.getItem('parent_child_id') : this.$g.user_id, //缓存孩子id
			role: this.roleBaseid(5),
		}
	},
	created() {
		this.getLeaveList();
	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
			this.identityVal = sessionStorage.getItem('parent_child_id') ? sessionStorage.getItem('parent_child_id') : this.$g.user_id; //缓存孩子id
			this.getLeaveList()
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		//
		changeCount(stare) {
			this.Qstate = stare;
			this.page_index = 1
			this.getLeaveList()
		},
		//列表
		getLeaveList() {

			let success = (res => {
				let data = res.data;
				let datacount = res.data.style_count;
				this.leaveList = data.data;
				this.page_index = parseInt(data.page_index);
				this.total_number = data.data_sum;

				this.all = datacount.all
				this.normal = datacount.normal
				this.unapproved = datacount.unapproved
				this.refused = datacount.refused 
				this.revoke = datacount.revoke

				this.loading = false
				this.leaveList.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			});

			let params = {
				data_type: -1,
				leave_type: this.Qstate,
				userid: this.$g.user_id,
				page_index: this.page_index,
				page_size: this.page_size
			}
			this.$ajax.get('api/leave/leave_list', { params, func: { success: success} })


			if (this.role) {
				params.userid = this.identityVal || this.$g.user_id, //缓存孩子id,
				this.$ajax.get('api/leave/leave_list', { params, func: { success: success} })
			} else {
				this.$ajax.get('api/leave/leave_list', { params, func: { success: success} })
			}

		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getLeaveList()
		},
		changeSelected() {
			this.page_index = 1;
			this.getLeaveList()
		},
		////筛选状态
		changeCount(stare) {
			this.Qstate = stare;
			this.getLeaveList()
		},
		//撤销
		getRevoke(res_id) {
			this.$confirm('确认要撤销申请吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {

					this.getLeaveList()
				});
				this.$ajax({
					url: 'api/leave/leave',
					method: 'put',
					data: {
						status: 4,
						leaveid: res_id
					},
					func: {
						success: success
					}
				})
			}).catch(() => {});
		},
	}
}
</script>